<template>
  <div class="horizontal-scroll-menu">
    <!-- 左箭头 -->
    <div 
      class="scroll-arrow left-arrow" 
      :class="{ disabled: scrollPosition === 0 }"
      @click="scrollLeft"
    >
      <el-icon><ArrowLeft /></el-icon>
    </div>
    
    <!-- 菜单容器 -->
    <div class="menu-container" ref="menuContainer">
      <el-menu
        mode="horizontal"
        :default-active="activeIndex"
        class="scrollable-menu"
        @select="handleSelect"
      >
        <el-menu-item 
          v-for="item in menuItems" 
          :key="item.index" 
          :index="item.index"
        >
          {{ item.title }}
        </el-menu-item>
      </el-menu>
    </div>
    
    <!-- 右箭头 -->
    <div 
      class="scroll-arrow right-arrow" 
      :class="{ disabled: isScrollEnd }"
      @click="scrollRight"
    >
      <el-icon><ArrowRight /></el-icon>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'

const activeIndex = ref('1')
const menuContainer = ref(null)
const scrollPosition = ref(0)
const menuItems = ref([
  { index: '1', title: '菜单项1' },
  { index: '2', title: '菜单项2' },
  { index: '3', title: '菜单项3' },
  { index: '4', title: '菜单项4' },
  { index: '5', title: '菜单项5' },
  { index: '6', title: '菜单项6' },
  { index: '7', title: '菜单项7' },
  { index: '8', title: '菜单项8' },
  { index: '9', title: '菜单项9' },
  { index: '10', title: '菜单项10' }
])

// 计算是否滚动到最右端
const isScrollEnd = computed(() => {
  if (!menuContainer.value) return true
  const container = menuContainer.value
  return scrollPosition.value >= container.scrollWidth - container.clientWidth
})

// 向左滚动
const scrollLeft = () => {
  if (scrollPosition.value <= 0) return
  scrollPosition.value -= 200
  menuContainer.value.scrollTo({
    left: scrollPosition.value,
    behavior: 'smooth'
  })
}

// 向右滚动
const scrollRight = () => {
  if (isScrollEnd.value) return
  scrollPosition.value += 200
  menuContainer.value.scrollTo({
    left: scrollPosition.value,
    behavior: 'smooth'
  })
}

// 处理菜单选择
const handleSelect = (index) => {
  activeIndex.value = index
  console.log('选中菜单:', index)
}

// 监听窗口大小变化
const handleResize = () => {
  if (!menuContainer.value) return
  // 确保滚动位置不超过最大可滚动距离
  const maxScroll = menuContainer.value.scrollWidth - menuContainer.value.clientWidth
  scrollPosition.value = Math.min(scrollPosition.value, maxScroll)
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.horizontal-scroll-menu {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 800px; /* 可根据需要调整 */
  margin: 0 auto;
  position: relative;
}

.menu-container {
  flex: 1;
  overflow-x: hidden;
  scroll-behavior: smooth;
  white-space: nowrap;
}

.scrollable-menu {
  display: inline-block;
  min-width: 100%;
  border-bottom: none;
}

.scrollable-menu .el-menu-item {
  padding: 0 20px;
}

.scroll-arrow {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
  flex-shrink: 0;
}

.scroll-arrow:hover {
  background-color: #e4e7ed;
}

.scroll-arrow.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.scroll-arrow .el-icon {
  font-size: 16px;
  color: #606266;
}

.left-arrow {
  margin-right: 10px;
}

.right-arrow {
  margin-left: 10px;
}

/* 隐藏原生滚动条 */
.menu-container::-webkit-scrollbar {
  display: none;
}
</style>